import React, { Fragment } from 'react'
import ImageView from './base/imageView'
import styled from 'styled-components'
const DmallList = (props) => {
  const { list, toCartEvent } = props;
  return (
    <Fragment>
      {
        list.length && list.map((item, index) => {
          return (
            <ListWrapper className="list-wrapper" key={index}>
              <ImageBox>
                <ImageView src={item.img} />
              </ImageBox>
              {item.name}
              <SpanBtn onClick={() => {
                toCartEvent && toCartEvent(item)
              }}>+</SpanBtn>
            </ListWrapper>)
        })
      }
    </Fragment>
  )
}

export default DmallList;

const ImageBox = styled.div`
  width: 150px;
  height: 150px;
`
const ListWrapper = styled.div`
  width: 45%; 
  margin: 5px 8px;
`
const SpanBtn = styled.span`
  display:block;
  width: 40px;
  height: 40px;
  background: #ccc;
  text-align:center;
  border-radius: 10px;
  line-height: 40px;
  margin:0 auto;
`

